import React, { useState, useEffect, useRef } from 'react';
import CodeInput from './input'; // 导入验证码输入框
import { history, useLocation } from 'umi';
import { Button } from 'antd-mobile';
import { message } from 'antd';
import axios from 'axios';
export default function InputCode() {
  const timerCount = 60; //默认60秒
  const [num, setNum] = useState('1');
  const [count, setCount] = useState(timerCount);
  const timerRef = useRef(null); // 记录时间的定时器
  const cutCount = () => {
    setCount((prevState) => prevState - 1); // 为什么这里要用函数- 如果用count 发现count闭包了 不会发生变化了
  };
  const location = useLocation();
  const [vertifyCode, setVertifyCode] = useState(''); // 保存当前输入的验证
  const [houCode, sethouCode] = useState(location.query.captcha); // 保存后端传过来的验证
  const [timeCode, setTimeCode] = useState(location.query.effective); // 有效时长
  const [sendTime, setsendTime] = useState(location.query.time); // 有效时长
  const [phone, setPhone] = useState(location.query.phone); // 有效时长
  // const [vertifyCode, setVertifyCode] = useState("");
  // const [numString, setNumString] = useState(''); // 验证码的字符串类型码

  // 验证码改变事件
  const handleChange = (vertifyCode: any) => {
    console.log('当前输入了：', vertifyCode);
    setVertifyCode(vertifyCode); // 更新验证码
  };

  // 验证码输入完成后进行校验
  const handleComplete = (e: any) => {
    console.log(e, '22222');
    if (e == houCode) {
      let d = new Date(Date.now()); //当前时间
      let now =
        d.getFullYear() +
        '/' +
        (d.getMonth() + 1) +
        '/' +
        d.getDate() +
        ' ' +
        d.getHours() +
        ':' +
        d.getMinutes() +
        ':' +
        d.getSeconds();
      if (
        new Date(now).getTime() - new Date(sendTime).getTime() <
        (timeCode - '') * 60 * 1000
      ) {
        history.push('/hello/home');
        message.success('验证成功~');

        console.log(11);
      } else {
        //验证码失效
        console.log(112);
      }
    } else {
      //验证码不对
      console.log(113);
    }
  };

  // 重新发送方法
  async function sendCode() {
    // 要发送验证码
    cutCount();
    timerRef.current = setInterval(cutCount, 1000);
    console.log(phone, 72);
    const data = await axios.post('/api/users/sendCode', { phone: phone });
    console.log(data, 'data');
    console.log('777777');
  }
  useEffect(() => {
    if (num === '1') {
      sendCode();
      setNum('2');
    }
    if (count === 0) {
      clearInterval(timerRef.current); // 清空定时器
      setCount(timerCount); // 重新将技术器设置为60秒
    }
  }, [count]);

  return (
    <div className="root">
      <div className="title">输入验证码</div>
      <div className="sub-title-container">
        <div className="sub-title">已发送验证码至</div>
        <span className="phone-number">+86 {phone}</span>
      </div>
      <div className="code">
        <CodeInput
          vertifyCode={vertifyCode}
          onChange={handleChange}
          onComplete={handleComplete}
        />
      </div>
      <div>
        <Button
          style={{ background: '#FE723D', color: '#fff', margin: '20px 20px' }}
          disabled={count < timerCount}
          onClick={count === timerCount ? sendCode : null}
        >
          {count === timerCount ? '重新发送' : `还剩${count}秒`}
        </Button>
      </div>
    </div>
  );
}
